{extend name="sitehome@public/base" /}
{block name="resources"}
<style type="text/css">
.buy-list {

}
.buy-item {
    height: 150px;
    width: 150px;
    float: left;
    margin-right: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    margin-bottom: 15px;
    line-height: 1;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.sms-num {
    font-size: 20px;
    margin: 28px 0 10px;
}
    .sms-price {
        font-weight: 400;
        font-size: 12px;
        color: #666;
        margin: 23px 0 21px 0;
    }
    .sms-remaining {
        font-size: 21px;
    }
.discount {
    background-color: #f56b23;
    color: #fff;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    top: 4px;
    right: -20px;
    position: absolute;
    width: 70px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.align-center{
    text-align: center;
}
.align-right{
    text-align: right;
}
.margin-top15{
    margin-top: 15px;
}
</style>
{/block}
{block name="main"}
<div class="layui-row layui-col-space12">

    <div style="padding: 20px; background-color: #F2F2F2;margin: 6px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md3 align-center">
                <p><span class="">短信总条数</span></p><br/><span class="sms-remaining">{$sms_data.sms_count_num}</span>
            </div>
            <div class="layui-col-md3 align-center">
                <p><span class="">剩余条数</span></p><br/><span class="sms-remaining">{$sms_data.sms_surplus_num}</span>
            </div>
            <div class="layui-col-md3 align-center">
                <p><span class="">已发送条数</span></p><br/><span class="sms-remaining">{$sms_data.sms_use_num}</span>
            </div>
            <div class="layui-col-md3 align-right">
                <a class="layui-btn margin-top15" href="{$buy_url}">购买短信</a>
            </div>
        </div>
    </div>
    <br>
    <div class="buy-list layui-form">
        {foreach name="sms_type_list['data']" item="v"}
        <div class="buy-item">
            <div class="sms-num">{$v['num']}条</div>
            <div class="sms-price">单价{$v['price'] * $v['type_discount']}元/条</div>
            <button class="layui-btn layui-btn-primary " data_id="{$v['id']}" onclick="createOrder(this)">￥{$v['total_price'] * $v['type_discount']}</button>
            {lt name="$v['type_discount']" value="1"}
            <div class="discount">{$v['type_discount'] * 10}折</div>
            {/lt}
        </div>
        {/foreach}

    </div>

</div>

<table id="sms_list" lay-filter="sms_list"></table>

<script type="text/html" id="operation">
    <a class="default" lay-event="detail">详情</a>
    {{# if(d.status == 0){ }}
    <a class="default" lay-event="pay">去支付</a>
    <a class="default" lay-event="close">关闭</a>
    {{# } }}
</script>

<script type="text/html" id="status">
    {{# if(d.status == 1) { }}
    <span>已完成</span>
    {{# } }}

    {{# if(d.status == 0) { }}
    <span style="color: #f44">待支付</span>
    {{# } }}

    {{# if(d.status == -1) { }}
    <span>已关闭</span>
    {{# } }}
</script>
{/block}
{block name="script"}
<script type="text/javascript">
var table = new Table({
	elem: '#sms_list',
    filter : "sms_list",
	url: '{:addon_url("SmsNiucloud/sitehome/index/buysitesms")}',
	cols: [
		[
			{
				field: 'order_no',
				width: '15%',
				title: '订单号'
			},
			{
				field: 'product_name',
				width: '15%',
				title: '套餐名称'
			},
			{
				field: 'num',
				width: '10%',
				title: '数量',
				align: 'center'
			},
			{
				field: 'product_spec_name',
				width: '10%',
				title: '规格',
			},
			{
				field: 'total_price',
				width: '10%',
				title: '价格',
				templet: function (data) {
					return '￥' + data['total_price'];
				}
			},
			{
				width: '10%',
				title: '创建时间',
				templet: function (data) {
					return nc.time_to_date(data.create_time);
				}
			},
			{
				field: 'total_price',
				width: '10%',
				title: '支付时间',
				templet: function (data) {
					if (data.pay_time > 0) {
						return nc.time_to_date(data.pay_time);
					} else {
						return '';
					}
				}
			},
			{
				field: 'status',
				width: '10%',
				title: '状态',
				templet: '#status'
			},
			{
				title: '操作',
				width: '10%',
				// toolbar: '#operation'
			}
		]
	]
});

table.tool( function (obj) {
	var data = obj.data;
	var layEvent = obj.event;
	if (layEvent === 'detail') {
		location.href = nc.url('SmsNiucloud://sitehome/index/createsmsorder', {"id": data.id})
	} else if (layEvent === 'pay') {
		pay(data.pay_url);
	} else if (layEvent === 'close') {
		close(data.id);
	}
	
});

function pay(url) {
	window.location.href = url;
}

function close(id) {
	layer.confirm('确定关订单？', {title: '提示'}, function (index) {
		$.ajax({
			url: '{:addon_url("SmsNiucloud://sitehome/index/closeOrder")}',
			type: 'post',
			data: {id},
			dataType: "JSON",
			success: function (res) {
				layer.msg(res.message);
				if (res.code == 0) {
					table.reload()
				}
			}
		});
		
		layer.close(index);
	});
}
</script>
{/block}
